<template>
    <div class="box">
        <h1>我是父亲曹操:{{money}}</h1>
        <button @click="handler">找我的儿子曹植借10元</button>
        <hr>
        <Son ref="sonInstance"></Son>
        <hr>
        <Dau></Dau>
    </div>
</template>

<script setup lang="ts">
  //ref:可以获取真实的DOM节点,可以获取到子组件实例VC
  //$parent:可以在子组件内部获取到父组件的实例
  //引入子组件
  import Son from "./Son.vue";
  import Dau from "./Daughter.vue";
  import { ref } from "vue";
  //父组件钱数
  let money = ref(100000000);
  //获取子组件的实例
  let sonInstance = ref();
  //父组件内部按钮点击回调
  const handler = () => {
    console.log(JSON.stringify(sonInstance))
    money.value += 10;
    //儿子钱数减去10
    sonInstance.value.money -= 10;
    // 调取子组件事件
    sonInstance.value.fly();
  };

  //组件内部数据对外关闭的，别人不能访问
  //如果想让外部访问需要通过defineExpose方法对外暴露
  //对外暴露
  defineExpose({
    money
  });
</script>

<style scoped>
    .box {
        width: 100vw;
        height: 500px;
        background: skyblue;
    }
</style>